@charset "utf-8";

//rest------------------------------------------------------------------------------------------------
* {
  margin: 0;
  padding: 0;
  font-family:"microsoft yahei";
}
li{ list-style: none;}
a{text-decoration: none;}
img{
    border: none;
}

audio{display: none;}



//public------------------------------------------------------------------------------------------------
 body{
    background-color: #009fdf;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    margin: 0 auto;
    overflow: hidden;
}
.step1Bg{
    background-color: #009fdf;
    background-image: url(../img/bac.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    margin: 0 auto;
    overflow: hidden;
}

.bg{
    background-image: url(../img/bg.jpg);
    
}


img{
    display: block;
    width: 100%;
}

.box{//每个大容器通用
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    min-width: 3.2rem;
    max-width: 7.5rem;
    overflow: hidden;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}


.el(@width,@top:auto,@left:auto,@right:auto){//简化CSS  width top left right
    position: absolute;
    width: @width;
    top: @top;
    left: @left;   
    right: @right; 
}

.mask{
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

//圣诞雪地
.sdxd{
    height: 1.7rem;
    .el(7.5rem,auto,0,0);
    bottom: 0;
    
    .xuedi{
        width: 7.5rem;
        height:0.82rem;
        position: absolute;
        bottom: 0;
        background: url(../img/xuedi.png) repeat-x;
        background-size: auto 100%;
        animation: dd 10s linear 0s infinite normal;
        -webkit-animation: dd 10s linear 0s infinite normal;
    }
    
    @keyframes xuedi{
        0%{
           background-position: 7.5rem top;
        }
        100%{
           background-position:0 top; 
        }
    }
    
    @-webkit-keyframes xuedi{
        0%{
           background-position: 7.5rem top;
        }
        100%{
           background-position:0 top; 
        }
    }
    
    .tree{
        .el(2.06rem,auto,3rem,auto);
        bottom: 0.7rem;
        animation: tree 8s linear 0s infinite normal;
    }
    
    @keyframes tree{
        0%{
           
        }
        100%{
          left: -2rem;
        }
    }
    
    .laoren{
        .el(2.89rem,auto,0.1rem,auto);
        bottom: 0.2rem;
    }
    
    .naifen{
        .el(2.18rem,auto,auto,0.2rem);
        bottom: 0rem;
        opacity: 0;
        animation: naifen 0.5s linear 2s 1 normal;
       -webkit-animation: naifen 0.5s linear 2s 1 normal;
        animation-fill-mode: forwards;
    }
    
    @keyframes naifen{
        0%{
            bottom: 5rem;
            
        }
        100%{
           bottom: 0rem;
           opacity: 1;
        }
    }
    @-webkit-keyframes naifen{
        0%{
            bottom: 5rem;
            
        }
        100%{
           bottom: 0rem;
           opacity: 1;
        }
    }
}




.public{
    .box;
    
    .logo{
        .el(1.6rem,0,0.25rem,auto);
        z-index: 1100;
    }
    
    .btn_gz{
        .el(1.7rem,0.25rem,auto,0.2rem);
        z-index: 500;
    }
    
    .guize{
        width: 6.5rem;
        height: 11.1rem;
        z-index: 1100;
        position: absolute;
        top: 0;
        left: 0.5rem;
        background: url(../img/bac_gz.png) no-repeat center top;
        background-size: 100%;
        
        animation:guize 1s linear 0s 1 normal;
        -webkit-animation:guize 1s linear 0s 1 normal;
        
        
       
        .text{
            width: 5.3rem;
            margin: 2.8rem auto 0;
            
            
            strong{
                font-size: 0.3rem;
                color: #b81d22;
                font-weight: normal;
            }
            
            p{
                font-size: 0.26rem;
                line-height: 1.5;
                color: #10558f;
                text-align: justify;
                margin: 0.1rem auto 0.2rem;
            }
        }
        
        .close{
            .el(0.63rem,auto,(6.5-0.63)/2rem,auto);
            bottom: 0.6rem;            
        }
    }
    
    @keyframes guize{
        0%{
            top:-1.5rem;
        }
        50%{
            top: 0; 
        }
        75%{
            top: -0.3rem; 
        }
        100%{
            top: 0; 
        }
    }
    
    @-webkit-keyframes guize{
        0%{
            top:-1.5rem;
        }
        50%{
            top: 0; 
        }
        75%{
            top: -0.3rem; 
        }
        100%{
            top: 0; 
        }
    }
    
    .msg{
        width: 6.5rem;
        height: 11.1rem;
        z-index: 1100;
        position: absolute;
        top: 0;
        left: 0.5rem;
        background: url(../img/bac_gz.png) no-repeat center top;
        background-size: 100%;
       
        .msgBox{
            width: 5.3rem;
            margin: 3.2rem auto 0;
            position: relative;
            
            p{
                font-size: 0.36rem;
                color: #0f1268;
                text-align: center;
                
                strong{
                    display: block;
                    font-size: 0.46rem;
                    font-weight: normal;
                }
            }
            
            .btn{
                .el(2.41rem,3rem,(5.3-2.41)/2rem,auto);
                z-index: 10000;
            }
            
            .smallText{
                position: absolute;
                width: 100%;
                top: 5.3rem;
                font-size: 0.24rem;
                z-index: 10000;
            }
            
            .jp{
                width: 100%;
                position: absolute;
                top: 2rem;
                text-align: center;
                
                img{
                    width: auto;
                    height: 2.3rem;
                    display: block;
                    margin: 0 auto;
                }
            }
            
            .form{
                padding: 0.5rem 0.2rem 0;
                font-size: 0.4rem;
                color: #0f1268;
                
                div{
                    margin-bottom: 0.3rem;
                }
                
                input{
                    
                    width:3rem;
                    height: 0.6rem;
                    border: 1px solid #0f1268;
                    border-radius: 0.3rem;
                    padding: 0 0.2rem;
                    margin-left: 0.2rem;
                }
                .tips{
                    font-size: 0.28rem;
                    text-align: center;
                }
            }
            
                
            .ma{
                
                img{
                    width: 2.31rem;
                    display: block;
                    margin: 0.2rem auto 0.4rem                        
                }
                
                p{
                    font-size: 0.3rem;
                    text-align: left;
                    padding: 0 0.2rem;
                }
            }
            
            .shareNaifen{
                width: 100%;
                position: absolute;
                top: 0.5rem;

                img{
                    width: auto;
                    height: 2.35rem;
                    display: block;
                    margin: 0 auto;
                }
            }
        }
    }
    
    .shareArrows{
        .el(2.14rem,0.4rem,auto,0.4rem);         
    }
    
    .yihan{
        .el(2.95rem,3rem,1.2rem,auto);
    }
    
    //送一张给好友/请好友赐这张卡
    .kaBox{
       .el(4rem,1.3rem,1.75rem,auto); 
    }
    
    .jhBtn{
       .el(3.36rem,7rem,(7.5-3.33)/2rem,auto); 
    }
    
    .kaNaifen{
       .el(3.36rem,auto,(7.5-3.36)/2rem,auto);
       bottom: 0.1rem;
    }
    .kaClose{
        .el(0.63rem,1.1rem,5.5rem,auto); 
    }
    
    
    .kamsg{
        width: 6.5rem;
        height: 11.1rem;
        z-index: 1100;
        position: absolute;
        top: 0;
        left: 0.5rem;
        background: url(../img/kaBg.png) no-repeat center top;
        background-size: 100%;
        
        .msgBox{
            width: 5.3rem;
            margin: 5.5rem auto 0;
            position: relative;
            
            
            p{
                font-size: 0.5rem;
                color: #0f1268;
                text-align: center;
            }
            
            .btn{
              position: absolute;
              top: 2.5rem;
              display: block;
              width: 1.5rem;
              height: 0.5rem;
              background: #db464a;
              border: 0.05rem solid #d50e14;
              border-radius: 0.25rem;
              text-align: center;
              line-height: 0.5rem;
              font-size: 0.3rem;
              color: #FFF;
            }
            .left{
                left:0.5rem;
            }
            .right{
                right:0.5rem;
            }
            
            
        
        }
        .close{
            .el(0.63rem,auto,(6.5-0.63)/2rem,auto);
            bottom: 1rem;            
        }     
    }
  
    
}

 

//step1  首页------------------------------------------------------------------------------------------------
.step1{
    .box;
    
    .title{
        .el(7rem,0.6rem,0.25rem,auto);
    }
    
    .lingdang{
        .el(1.44rem,3.8rem,(7.5-1.44)/2rem,auto);
    }
    
    .kaBox{
        .el(7.5rem,5.5rem,0,0);
        
      
        
        div{
            .el(2.4rem,auto,(7.5-2.4)/2rem,auto);
        }
        
       
        .ka1{
            animation: ka1 1s linear 1s 1 normal;
            -webkit-animation: ka1 1s linear 1s 1 normal;
            animation-fill-mode: forwards;
        }
        
        @keyframes ka1{
            0%{
            }
            100%{
                left: 0.4rem;
                transform: rotate(-20deg);
            }
        }
        @-webkit-keyframes ka1{
            0%{
            }
            100%{
                left: 0.4rem;
                transform: rotate(-20deg);
            }
        }
        
        
        .ka2{
            animation: ka2 1s linear 1s 1 normal;
            -webkit-animation: ka2 1s linear 1s 1 normal;
            animation-fill-mode: forwards;
            
        }
        @keyframes ka2{
            0%{
            }
            100%{
                left: 2rem;
                transform: rotate(-10deg);
                margin-top: -0.4rem;
            }
        }
        @-webkit-keyframes ka2{
            0%{
            }
            100%{
                left: 2rem;
                transform: rotate(-10deg);
                margin-top: -0.4rem;
            }
        }
        .ka3{
            animation: ka3 1s linear 1s 1 normal;
            -webkit-animation: ka3 1s linear 1s 1 normal;
            animation-fill-mode: forwards;
           
        }
        @keyframes ka3{
            0%{
            }
            100%{
                left: 3.2rem;
                transform: rotate(10deg);
                margin-top: -0.4rem;
            }
        }
        @-webkit-keyframes ka3{
            0%{
            }
            100%{
                left: 3.2rem;
                transform: rotate(10deg);
                margin-top: -0.4rem;
            }
        }
      
        .ka4{
            animation: ka4 1s linear 1s 1 normal;
            -webkit-animation: ka4 1s linear 1s 1 normal;
            animation-fill-mode: forwards;
           
        }
        @keyframes ka4{
            0%{
            }
            100%{
                left: 4.6rem;
                transform: rotate(20deg);
            }
        }
        @-webkit-keyframes ka4{
            0%{
            }
            100%{
                left: 4.6rem;
                transform: rotate(20deg);
            }
        }
    }
    
    
    .start{
        .el(2.85rem,8.2rem,(7.5-2.85)/2rem,auto);
        z-index: 10;
    }
}


//step2
.step2{
    .box;
    
    .text{
       .el(3.2rem,1.5rem,(7.5-3.2)/2rem,auto); 
    }
    
    .huabu{
        width: 7.5rem;
        height: 3.7rem;
        position: absolute;
        top: 2.1rem;
       
        
        ul{
            li{
                position: absolute;
                opacity: 1;
                
                .star1{
                    opacity: 1;
                    position: absolute;
                }
                .star2{
                    opacity: 0;
                    position: absolute;
                }
               
            }
            
            
            .pos1{
                width:1rem;
                left: 2.3rem;
                top: 0.35rem;
            }
            .pos2{
                width:0.8rem;
                left:3.6rem;
                top:0.9rem;
            }
            .pos3{
                width:1rem;
                left: 4.9rem;
                top: 0.25rem;
            }
            .pos4{
                width:1rem;
                left: 0.7rem;
                top: 1.9rem;
            }
            .pos5{
                width:1rem;
                left: 2.5rem;
                top: 2.1rem;
            }
            .pos6{
                width:1rem;
                left: 4.7rem;
                top: 1.8rem;
            }
            .pos7{
                width:1rem;
                left: 5.9rem;
                top: 1.9rem;
            }
            .pos8{
                width:1rem;
                left: 1.45rem;
                top: 2.9rem;
            }
            .pos9{
                width:1.2rem;
                left: 3.8rem;
                top: 2.7rem;
            }
            
            .hand{
                
            }
        }
        
        .star1{
            animation: star1 0.5s linear 0s 4 normal;
            -webkit-animation: star1 0.5s linear 0s 4 normal;
        }
        
        @keyframes star1{
            0%{
                opacity: 1;
                transform: scale(0.3);
            }
           
            50%{
                transform: scale(1);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        @-webkit-keyframes star1{
            0%{
                opacity: 1;
                transform: scale(0.3);
            }
           
            50%{
                transform: scale(1);
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        
        .star2{
            animation: star2 0.5s linear 0s 4 normal;
            -webkit-animation: star2 0.5s linear 0s 4 normal;
            
        }
        
        @keyframes star2{
            0%{
                opacity: 0;
            }
           
            50%{
                opacity: 1;
                transform: scale(1);
            }
            100%{
                opacity: 1;
                transform: scale(0.3);
            }
        }
        @-webkit-keyframes star2{
            0%{
                opacity: 0;
            }
           
            50%{
                opacity: 1;
                transform: scale(1);
            }
            100%{
                opacity: 1;
                transform: scale(0.3);
            }
        }
        
        .lianxian{
            position: relative;
            
            animation: lianxian 0.5s linear;
            -webkit-animation: lianxian 0.5s linear;
            animation-fill-mode: forwards;
            
            @keyframes lianxian{
                0%{
                    
                }
                99%{
                   opacity:1; 
                }
                100%{
                  opacity: 0;  
                }
            }
            @-webkit-keyframes lianxian{
                0%{
                    
                }
                99%{
                   opacity:1; 
                }
                100%{
                  opacity: 0;  
                }
            }
            
            
            .hand{
                width: 0.5rem;
                position: absolute;
                opacity:0;
                top:0.7rem;
                left:2.6rem;
                animation: handTis 2s linear;
                -webkit-animation: handTis 2s linear;
                animation-fill-mode: forwards;
            }
            
             @keyframes handTis{
                0%{
                    opacity: 1;
                    top:2.2rem;
                    left:1rem;
                }
                25%{
                    top:0.7rem;
                    left:2.6rem;
                }
                50%{
                    top:2.4rem;
                    left:2.8rem;
                }
                75%{
                    opacity: 1;
                    top:3.1rem;
                    left:4.2rem;
                }
                100%{
                    opacity: 1;
                    top:3.1rem;
                    left:4.2rem;
                }
            }
            @-webkit-keyframes handTis{
                0%{
                    opacity: 1;
                    top:2.2rem;
                    left:1rem;
                }
                25%{
                    top:0.7rem;
                    left:2.6rem;
                }
                50%{
                    top:2.4rem;
                    left:2.8rem;
                }
                75%{
                    opacity: 1;
                    top:3.1rem;
                    left:4.2rem;
                }
                100%{
                    opacity: 1;
                    top:3.1rem;
                    left:4.2rem;
                }
            }
            
            
            .starLine{
                height: 1px;
                background: #80ffff;
                opacity: 0.3;
                transform: rotate(-45deg);
                position: absolute;
                transform-origin: left top;
                opacity: 0;
            }
       
            .starLine1{
                width: 2.3rem;
                transform: rotate(-45deg);
                top: 2.3rem;
                left: 1.2rem;
                animation: starLine1 0.5s linear;
                -webkit-animation: starLine1 0.5s linear;
                animation-fill-mode: forwards;
                
                
            }
            @keyframes starLine1{
                0%{
                  opacity: 0.3;  
                  width: 0;
                }
                100%{
                  opacity: 0.3;  
                }
            }
            @-webkit-keyframes starLine1{
                0%{
                  opacity: 0.3;  
                  width: 0;
                }
                100%{
                  opacity: 0.3;  
                }
            }
            
            .starLine2{
                width: 1.9rem;
                transform: rotate(83deg);
                top: 0.7rem;
                left: 2.8rem;
                animation: starLine2 0.5s linear;
                -webkit-animation: starLine2 0.5s linear;
                animation-fill-mode: forwards;
            }
            @keyframes starLine2{
                0%{
                  opacity: 0.3;  
                  width: 0;
                }
                100%{
                  opacity: 0.3;  
                }
            }
            @-webkit-keyframes starLine2{
                0%{
                  opacity: 0.3;  
                  width: 0;
                }
                100%{
                  opacity: 0.3;  
                }
            }
            
            .starLine3{
                width: 1.6rem;
                transform: rotate(25deg);
                top: 2.5rem;
                left: 3rem;
                animation: starLine3 0.5s linear;
                -webkit-animation: starLine3 0.5s linear;
                animation-fill-mode: forwards;
            }
            @keyframes starLine3{
                0%{
                  opacity: 0.3;  
                  width: 0;
                }
                100%{
                  opacity: 0.3;  
                }
            }
            @-webkit-keyframes starLine3{
                0%{
                  opacity: 0.3;  
                  width: 0;
                }
                100%{
                  opacity: 0.3;  
                }
            }
            
            .starOn{
                position: absolute;
                width:1rem;
                animation: starOn 0.01s linear;
                -webkit-animation: starOn 0.01s linear;
                animation-fill-mode: forwards;
                opacity: 0;
            }
            @keyframes starOn{
                0%{
                  opacity: 0;  
                }
                100%{
                  opacity: 1;  
                }
            }
            @-webkit-keyframes starOn{
                0%{
                  opacity: 0;  
                }
                100%{
                  opacity: 1;  
                }
            }
                
            .starOn1{
                top: 1.9rem;
                left: 0.7rem;
            }
            .starOn2{
                top: 0.3rem;
                left: 2.3rem;
            }
            .starOn3{
                top: 2.1rem;
                left: 2.5rem;
            }
            .starOn4{
                top: 2.8rem;
                left: 3.9rem;
            }
            
            
        }
        
        
    }
    
    .zhaohuan{
      .el(2.87rem,auto,(7.5-2.87)/2rem,auto);
      z-index: 10;
      bottom: 4.5rem;
    }
    
    
    //掉卡动画
    
    .diaoka{
        position: absolute;
        width: 25%;
        left: 37.5%;
        bottom: 8rem;
        opacity: 0;
        z-index: 1000;
    }
    
    //掉卡动画1
    .diaokaDh1{
        animation: diaokaDh1 0.5s linear 0s 1 normal;
        -webkit-animation: diaokaDh1 0.5s linear 0s 1 normal;
        opacity: 0;
       // transform-origin: center top;
    }
    
    @keyframes diaokaDh1{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 0%;
        }
        
    }
    @-webkit-keyframes diaokaDh1{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 0%;
        }
        
    }
    
    //掉卡动画2
    .diaokaDh2{
        animation: diaokaDh2 0.5s linear 0s 1 normal;
        -webkit-animation: diaokaDh2 0.5s linear 0s 1 normal;
        opacity: 0;
       // transform-origin: center top;
    }
    
    @keyframes diaokaDh2{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 25%;
        }
        
    }
    @-webkit-keyframes diaokaDh2{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 25%;
        }
        
    }
    
    //掉卡动画3
    .diaokaDh3{
        animation: diaokaDh3 0.5s linear 0s 1 normal;
        -webkit-animation: diaokaDh3 0.5s linear 0s 1 normal;
        opacity: 0;
       // transform-origin: center top;
    }
    
    @keyframes diaokaDh3{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 50%;
        }
        
    }
    @-webkit-keyframes diaokaDh3{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 50%;
        }
        
    }
    
    //掉卡动画4
    .diaokaDh4{
        animation: diaokaDh4 0.5s linear 0s 1 normal;
        -webkit-animation: diaokaDh4 0.5s linear 0s 1 normal;
        opacity: 0;
       // transform-origin: center top;
    }
    
    @keyframes diaokaDh4{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 75%;
        }
        
    }
    @-webkit-keyframes diaokaDh4{
        0%{
          opacity: 0;
          transform: scale(0.2); 
        }
        30%{
          opacity: 1;
          transform: scale(0.5); 
        }
       
        100%{
            transform: scale(1); 
            opacity: 1;
            bottom:0rem;
            left: 75%;
        }
    }
    
    
    
    
    .times{
        font-size: 0.32rem;
        z-index: 12;
        color: #145590;
        position: absolute;
        bottom: 3.4rem;
        width: 100%;
        text-align: center;
    }
    
    
    .kaUL{
        position: absolute;
        width: 7.5rem;
        height: 3.45rem;
        bottom: -0.3rem;
        background: url(../img/bac_ka.png) no-repeat center top;
        background-size: 100%;
        
        li{
            width: 25%;
            margin-top: 0.3rem;
            float: left;
            position: relative;
            
            .kaMask{
                width: 86%;
                position: absolute;
                top: 1%;
                left: 7%;
            }
            
            p{
                font-size: 0.3rem;
                color: #FFF;
                position: absolute;
                top: 2.7rem;
                width: 100%;
                text-align: center;
                z-index: 10;
                display: none;
            }
            
            .num{
                width: 0.5rem;
                height: 0.3rem;
                line-height: 0.35rem;
                font-size: 0.2rem;
                background: #FFF;
                border: 2px solid #b81d23;
                border-radius: 0.5rem;
                text-align: center;
                position: absolute;
                top: 0.2rem;
                right: 0.1rem;
                color: #b81d23;
                font-weight: bold;
                
            }
        }
    }
    
    .sdxd{
        bottom: 3.15rem;
    }
    
}

//step3
.step3{
    .box;
    background-image: url(../img/step3.jpg);
    background-color: #00aae5;
    
    //抽奖
    .cj{
       
        
        .sdTree{
            .box;
            background: url(../img/sdTree.png) no-repeat center 1.7rem;
            background-size: 7rem;
            
            .guang1{
                .el(1.5rem,1.6rem,3rem,auto);
                transform: scale(2);
            }
            .guang{
                position: absolute;
                width: 1.5rem;
                transform: scale(2);
            }
            
            .guang2{
               top:3.4rem;
               left: 1.9rem;
            }
            
            .guang3{
               top:6.1rem;
               left: 2.7rem;
            }
            
            .guang4{
               top:5.9rem;
               left: 4.7rem;
            }
            
            
            .ul{
                position: absolute;
                width: 4.1rem;
                height: 4.4rem;
                top: 3.2rem;
                left: 1.6rem;
                
                li{
                    width: 0.6rem;
                    height: 0.6rem;
                    border-radius: 50%;
                    position: absolute;
                    text-indent: -999em;
                }
                
                .pos1{
                    top: 0rem;
                    left: 2rem;
                }
                .pos2{
                    top: 0.5rem;
                    left: 0.9rem;
                }
                .pos3{
                    top: 0.4rem;
                    left: 2.6rem;
                }
                .pos4{
                    top: 0.95rem;
                    left: 2.3rem;
                }
                .pos5{
                    top: 1.55rem;
                    left: 0.85rem;
                }
                .pos6{
                    top: 2.1rem;
                    left: 0.4rem;
                }
                .pos7{
                    top: 2rem;
                    left: 1.8rem;
                }
                .pos8{
                    top: 1.8rem;
                    left: 3.1rem;
                }
                .pos9{
                    top: 3.25rem;
                    left: 0rem;
                }
                .pos10{
                    top: 3.2rem;
                    left: 1.6rem;
                }
                .pos11{
                    top: 3.7rem;
                    left: 2.65rem;
                }
                .pos12{
                    top: 2.9rem;
                    left: 3.4rem;
                }
                
            }
        }
        
        p{
            width: 100%;
            font-size: 0.3rem;
            color: #0f1268;
            text-align: center;
            position: absolute;
            bottom:1.6rem;
            z-index: 10;
        }
    }
}
